<nz-page-header nzTitle="角色列表">
    <nz-breadcrumb nz-page-header-breadcrumb [nzAutoGenerate]="true">
        <nz-breadcrumb-item>
            <a [routerLink]="['/']">首页</a>
        </nz-breadcrumb-item>
    </nz-breadcrumb>
</nz-page-header>

<nz-card [nzExtra]="extraAction">
    <ng-template #extraAction>
        <button nz-button nzSize="large" (click)="create()" nzType="primary">{{'create' | translate}}</button>
        <nz-divider nzType="vertical"></nz-divider>
        <button nz-button nzSize="large" (click)="refresh()">
            {{'refresh' | translate}}</button>
    </ng-template>
    <nz-table #dataTable nzShowSizeChanger [nzFrontPagination]="false" [nzData]="dataItems$ | async" [nzTotal]="pageingInfo.totalItems"
        [(nzPageIndex)]="pageingInfo.pageNumber" [(nzPageSize)]="pageingInfo.pageSize" [nzLoading]="pageingInfo.isTableLoading" (nzPageIndexChange)="refresh()"
        (nzPageSizeChange)="refresh()">
        <thead>
            <tr>
                <th></th>
                <!-- <th nzWidth="20em">Id</th> -->
                <th>name</th>
                <th>IsPublic</th>
                <th>IsDefault</th>
                <th>isStatic</th>
            </tr>
        </thead>
        <tbody>
            <tr *ngFor="let data of dataTable.data">
                <td>
                    <button nz-button nz-dropdown nzType="primary" nzTrigger="click" ngTri [nzDropdownMenu]="menu">
                        <i nz-icon nzType="setting" nzTheme="fill"></i>
                        操作
                        <i nz-icon nzType="down"></i>
                    </button>
                    <nz-dropdown-menu #menu="nzDropdownMenu">
                        <ul nz-menu>
                            <li nz-menu-item (click)="edit(data)">{{'edit' | translate}}</li>
                            <li nz-menu-divider></li>
                            <li nz-menu-item (click)="claims(data.id)">{{'Claims' | translate}}</li>
                            <li nz-menu-divider></li>
                            <li nz-menu-item (click)="permissions(data)">{{'permissions' | translate}}</li>
                            <li nz-menu-divider></li>
                            <li nz-menu-item nz-popconfirm [nzPopconfirmTitle]="'delete.warning'" (nzOnConfirm)="delete(data)" nzPopconfirmPlacement="top">
                                {{'delete' | translate}}</li>
                        </ul>
                    </nz-dropdown-menu>
                </td>
                <!-- <td>{{ data.id }}</td> -->
                <td>
                    {{ data.name }}
                </td>
                <td>
                    <i nz-icon nzType="check-circle" nzTheme="twotone" nzTwotoneColor="#52c41a" *ngIf="data.isPublic"></i>
                </td>
                <td>
                    <i nz-icon nzType="check-circle" nzTheme="twotone" nzTwotoneColor="#52c41a" *ngIf="data.isDefault"></i>
                </td>
                <td>
                    <i nz-icon nzType="check-circle" nzTheme="twotone" nzTwotoneColor="#52c41a" *ngIf="data.isStatic"></i>
                </td>
            </tr>
        </tbody>
    </nz-table>
</nz-card>